<template>
    <div class="container container-announcementTrans">
        <a-spin tip="Loading..." :spinning="loading">
            <div class="info-top">
                <div class="info-row word-title">成都中医药大学技术转让信息公示</div>
                <div class="info-row page-flex">
                    <span class="word-h5">发布时间：{{detailInfo.publicityTime}}</span>
                    <span class="word-h5">【第{{detailInfo.number}}号】</span>
                </div>
            </div>
            <div class="info-row word-h2">根据《中华人民共和国促进科技成果转化法》《实施〈中华人民共和国促进科技成果转化法〉若干规定》等相关法律和
                规定，经双方协商确定，现将成都中医药大学拟转让技术有关事项如下公示：</div>
            <div class="info-row word-h1 word-grey">一、技术转让</div>
            <div class="info-row word-h3 word-grey">（一）技术信息</div>
            <div class="info-row word-panel">
                <div class="info-in-row word-h4">
                    <span class="word-light">成果名称：</span>
                    <span>{{detailInfo.achievementName}}</span>
                </div>
                <div class="info-in-row word-h4">
                    <span class="word-light">成果类型：</span>
                    <span>{{detailInfo.achievementCategory}}</span>
                </div>
                <div class="info-in-row word-h4">
                    <span class="word-light">成果识别号：</span>
                    <span>{{detailInfo.achievementIdentifyNumber}}</span>
                </div>
                <div class="info-in-row word-h4">
                    <span class="word-light">拟交易价格：</span>
                    <span>人民币{{detailInfo.bargainPrice}}万元（大写金额：{{detailInfo.amountInWords}}）</span>
                </div>
            </div>
            <div class="info-row word-h3 word-grey">（二）转让方：{{detailInfo.transferor}}</div>
            <div class="info-row word-h3 word-grey">（三）受让方：{{detailInfo.transferee}}</div>
            <div class="info-row word-h3 word-grey">（四）定价方式：{{detailInfo.typeOfPricing}}</div>
            <div class="info-row word-h3 word-grey">（五）重要贡献人：{{detailInfo.contributory}}</div>
            <div class="info-row word-h3 word-grey">
                （六）技术经纪人：{{detailInfo.transferTechnologyBrokerInfo?detailInfo.transferTechnologyBrokerInfo.map(item=>item.technicalRepresentative).join(','):'--' }}
            </div>
            <div class="info-row word-h2">
                公示时间为{{detailInfo.transferPublicityBeginTime | format('yyyy年MM月dd日')}}至{{detailInfo.transferPublicityEndTime | format('yyyy年MM月dd日')}}，公示期{{getDayNum()}}天。公示期内如有异议，请通过信函、电话和网络举报等方式向
                学校中医药健康产业技术研究院反映。反映问题要实事求是、客观公正，并提供联系方式，以便调查核实。
            </div>
            <div class="info-row page-flex">
                <div>
                    <div class="word-h5 word-grey">电话：</div>
                    <div class="word-h5">028-82784534（中医药健康产业技术研究院）</div>
                </div>
                <div class="word-h2">
                    <div>成都中医药大学</div>
                    <div>{{detailInfo.publicityTime | format('yyyy年MM月dd日')}}</div>
                </div>
            </div>
            <div class="bottom-btnbox">
                <a-button class="bottom-btn" type="primary" @click="clickDownload">下载到本地</a-button>
                 <a-button class="bottom-btn" type="primary" @click="clickHtmlDownload" style="margin-left:20px">下载原公示</a-button>
            </div>
        </a-spin>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import { downLoadFile } from "@/utils";
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: {} }) detailInfo!: any;
    splitContent(str: string) {
        return str.slice(0, 65) + "...";
    }
    getDayNum() {
        const startTime = new Date(this.detailInfo.transferPublicityBeginTime).getTime();
        const endTime = new Date(this.detailInfo.transferPublicityEndTime).getTime();
        const day = (endTime - startTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day);
    }
    loading = false;
    async clickDownload() {
        this.loading = true;
        api.exportTemplate(
            {
                id: this.detailInfo.id,
                type: "CGZH",
            },
            (res: any) => {
                const blob = new Blob([res.data], {
                    type: "application/pdf",
                });
                downLoadFile(blob, `成都中医药大学技术转让信息公示【第${this.detailInfo.number}号】`);
                this.loading = false;
            }
        );
    }
    clickHtmlDownload() {
        const dom = document.getElementById("app");
        const totalHeight = dom?.scrollHeight || 0;
        (window as any)
            .html2canvas(dom, {
                height: totalHeight,
                windowHeight: totalHeight,
            })
            .then((canvas) => {
                // 将canvas转换为图片
                const imgData = canvas.toDataURL("image/png");

                // 创建图片元素
                const img = document.createElement("img");
                img.src = imgData;
                document.body.appendChild(img);

                // 或者保存图片
                const link = document.createElement("a");
                link.download = `成都中医药大学技术转让信息公示【第${this.detailInfo.number}号】.png`;
                link.href = imgData;
                link.click();
                document.body.removeChild(img)
            });
    }
}
</script>

<style lang="scss">
.container-announcementTrans {
    width: 1300px;
    background-color: #fff;
    border-radius: 8px;
    margin: 30px auto;

    padding: 50px 40px;
    color: #132042;
    .word-title {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
    }
    .page-flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .word-grey {
        color: #82848a;
    }
    .word-h1 {
        font-size: 22px;
        font-weight: bold;
    }
    .word-h2 {
        font-size: 20px;
        font-weight: bold;
    }
    .word-h3 {
        font-size: 19px;
    }
    .word-h4 {
        font-size: 18px;
    }
    .word-h5 {
        font-size: 17px;
    }
    .info-row {
        margin-bottom: 20px;
    }
    .info-in-row {
        margin-bottom: 10px;
    }
    .word-panel {
        padding: 0 20px;
    }
    .bottom-btnbox {
        text-align: center;
    }
    .bottom-btn {
        height: 50px;
        width: 200px;
        font-size: 16px;
    }
}
</style>
